<template>
	<view class="order">
		<view class="tabs">
			<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change" active-color="#fe0000"></u-tabs>
		</view>
		
		<view class="orderList">
			<view class="item" @click="goOrderDetails(index)" v-for="(item,index) in order_list" :key="index">
				<view class="topBox flex_space_b">
					<view class="time">{{item.order_time}}</view>
					<view class="status redText" v-if="item.pintuan_state == '10'">拼团中</view>
					<view class="status redText" v-if="item.pintuan_state == '11' || item.order_type == '10'">
						<block v-if="item.order_state == '11'">待发货</block>
						<block v-if="item.order_state == '12'">待收货</block>
						<block v-if="item.order_state == '13'">已完成</block>
						<block v-if="item.order_state == '14'">已退款</block>
					</view>
					<view class="status redText" v-if="item.pintuan_state == '12'">未拼中</view>
					<view class="status redText" v-if="item.pintuan_state == '13'">拼团失败</view>
				</view>
				<view class="content">
					<view class="commodity flex_space_b">
						<image class="image" :src="item.goods_main_img" mode="aspectFill"></image>
						<view class="info">
							<view class="title u-line-2">{{item.goods_title}}</view>
							<view class="flex_space_b mTop2">
								<view class="price">￥<text>{{item.goods_price}}</text></view>
								<view class="number">x<text>1</text></view>
							</view>
						</view>
					</view>
					<view class="bottoBox flex_end_b mTop2">
						<view class="payment">
							实付款<text class="amount">￥<text class="text">{{item.order_price}}</text></text>
							<text class="wechat" v-if="item.pay_type == '10' || item.pay_type == '30'">微信支付</text>
							<text class="balance" v-if="item.pay_type == '20'">余额支付</text>
							<text class="alipay" v-if="item.pay_type == '40'">支付宝</text>
							
						</view>
						<button class="btn" hover-class="none" size="mini" v-on:click.stop="goGoodsDetails(index)" v-if="item.pintuan_state == '10'">邀请好友赚奖励</button>
						<button class="btn" hover-class="none" size="mini" v-if="item.pintuan_state == '11' && item.order_state == '12'">确认收货</button>
						<view class="obtain" v-if="item.pintuan_state == '12' || item.pintuan_state == '13' ">
							退回
							<text class="redText" v-if="item.tuikuan_type == '10'">微信</text>
							<text class="redText" v-else-if="item.tuikuan_type == '20'">余额</text>
							<text class="redText" v-else>支付宝</text>
							<block v-if="item.pintuan_state == '12'">
								，获得补贴<text class="redText">￥{{item.unselect_reward}}</text>
							</block>
							</view>
					</view>
					<view class="order_cycle" v-if="item.order_cycle_user_list.length > 0">
						<view class="order_cycle_item" v-for="(itm,index) in item.order_cycle_user_list" :key="index">
							<image :src="itm.user_headimg" :class="index == 0 ? 'selected' : 'unselected'"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="noContent" v-if="order_list.length == 0">
			  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
			  <view class="text">您还没有相关订单</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	
	export default {
		data() {
			return {
				p:1,
				is_loading:false,
				is_more:true,
				order_list:[],
				tabsList: [{
					name: '拼团中'
				}, {
					name: '已拼中'
				}, {
					name: '未拼中'
				}, {
					name: '已完成'
				}],
				current: 0,
				opt_index:0
			}
		},
		onLoad(options) {
			this.current = options.id;
			this.loadData(true);
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.loadData(false);
			}
		},
		methods: {
			loadData: function(is_flush){
				// 加载数据
				var that = this;
				this.is_loading = true;
				let data = {
					'p':this.p,
					'query_type': this.current
				};
				util.requestPost("api.php/user/orderList", data, function(res) {
					let is_more = false;
					if(res.data.order_list.length >=15){
					  is_more = true;
					}
					
					if(that.p == 1){
						that.order_list = res.data.order_list;
					}else{
						that.order_list = that.order_list.concat(res.data.order_list);
					}
					that.is_loading = false;
					that.is_more = is_more;
				},is_flush);
			},
			change (index) {
				this.current = index;
				this.p = 1;
				this.order_list = [];
				this.loadData(true);
			},
			goOrderDetails (index) {
				this.opt_index = index;
				if(this.order_list[index].pintuan_state == '10' || this.order_list[index].pintuan_state == '12'){
					uni.navigateTo({
						url: '/pages/index/goodsDetails?goods_id='+this.order_list[index].goods_id
					});
				}else{
					uni.navigateTo({
						url: '/pagesB/my/orderDetails?order_no='+this.order_list[index].order_no
					});
				}
				
			},
			// 回调更新订单状态
			updateOrderState(){
				this.order_list[this.opt_index].order_state = '13';
			},
			goGoodsDetails(index){
				uni.navigateTo({
					url:'/pages/index/goodsDetails?goods_id='+this.order_list[index].goods_id
				});
			}
		}
	}
</script>

<style scoped>
.order {
	min-height: 100%;
	background-color: var(--bgColor);
	padding-top: 80rpx;
}
.tabs {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
}
.orderList {
	padding: 30rpx;
}
.orderList .item {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}
.orderList .item .topBox {
	padding: 20rpx;
	border-bottom: 1rpx solid #EEEEEE;
}
.orderList .item .content {
	padding: 20rpx;
}
.orderList .item .content .commodity .image {
	width: 160rpx;
	height: 160rpx;
}
.orderList .item .content .commodity .info {
	flex: 1;
	margin-left: 20rpx;
}
.orderList .item .content .commodity .info .title {
	font-size: 30rpx;
}
.orderList .item .content .commodity .info .price {
	font-size: 24rpx;
}
.orderList .item .content .commodity .info .price text {
	font-size: 28rpx;
}
.orderList .item .content .commodity .info .number {
	font-size: 24rpx;
}
.orderList .item .content .commodity .info .number text {
	font-size: 28rpx;
}

.orderList .item .content .bottoBox {
	color: #999999;
	font-size: 24rpx;
}
.orderList .item .content .bottoBox .amount{
	color: #333;
	font-size: 24rpx;
}
.orderList .item .content .bottoBox .amount .text{
	font-size: 28rpx;
}
.orderList .item .content .bottoBox .btn {
	margin: 0;
	border-radius: 40rpx;
	background: var(--btnBgColor);
	border: none;
	color: #FFFFFF;
}

.order_cycle{
	display: flex;
	margin-top: 10rpx;
}

.order_cycle .order_cycle_item{
	display: flex;
}

.order_cycle .order_cycle_item image{
	width: 50rpx;
	height: 50rpx;
}
.order_cycle .order_cycle_item .selected{
	margin-right: 30rpx;
	border: 1px solid red;
}
.order_cycle .order_cycle_item .unselected{
	margin-right: 10rpx;
}
.wechat{
	color: #18B566;
	margin-left: 20rpx;
}
.alipay{
	color: #007AFF;
	margin-left: 20rpx;
}
.balance{
	color: red;
	margin-left: 20rpx;
}
</style>
